
/*Callout Positioning*/
:not(.is-live-preview) .callout.callout.callout:is(
    [data-callout-metadata~="p+l"], 
    [data-callout-metadata~="left"]
    ) { 
    float: left; 
    margin: unset;
    margin-right: 8px;
}
:not(.is-live-preview) .callout.callout:is(
    [data-callout-metadata~="p+r"], 
    [data-callout-metadata~="right"]
    ) { 
    float: right;
    margin: unset;
    margin-left: 8px;
}
.callout.callout.callout:is(
    [data-callout-metadata~="ctr"], 
    [data-callout-metadata~="center"]
    ) {
    display: block;
    margin: auto;
    float: unset;
}
.callout.callout {
    &[data-callout-metadata~="wtiny"]    { width: 20%; }
    &[data-callout-metadata~="wsmall"]   { width: 30%; }
    &[data-callout-metadata~="ws-med"]   { width: 40%; }
    &[data-callout-metadata~="wm-sm"]    { width: 50%; }
    &[data-callout-metadata~="wmed"]     { width: 60%; }
    &[data-callout-metadata~="wm-tl"]    { width: 80%; }
    &[data-callout-metadata~="wtall"]    { width: 95%; }
    &[data-callout-metadata~="wfull"]    { width: 100%; }

    &[data-callout-metadata~="wtiny-c"]    { width: 19%; }
    &[data-callout-metadata~="wsmall-c"]   { width: 32.4%; }
    &[data-callout-metadata~="ws-med-c"]   { width: 39%; }
    &[data-callout-metadata~="wm-sm-c"]    { width: 49%; }
    &[data-callout-metadata~="wmed-c"]     { width: 59%; }
    &[data-callout-metadata~="wm-tl-c"]    { width: 79%; }
}
body .callout.callout.callout:is([data-callout-metadata~="nmg"], [data-callout-metadata~="no-margin"]) {
    margin: 0;
}
.callout[data-callout-metadata~="collapse"] * {
    margin: 0 !important;
    padding: 0 !important;
    grid-gap: 0 !important;
}
.callout.callout.callout:is([data-callout-metadata~="nbrd"], [data-callout-metadata~="no-border"]) {
    border: 0;
}

// Align Callout Content Text
.callout.callout:is(
    [data-callout-metadata~="txt-l"],
    [data-callout-metadata~="text-Left"]
) > .callout-content {
    text-align: left;
}
.callout.callout:is(
    [data-callout-metadata~="txt-r"],
    [data-callout-metadata~="text-Right"]
) > .callout-content {
    text-align: right;
}
.callout.callout:is(
    [data-callout-metadata~="txt-c"],
    [data-callout-metadata~="text-Center"]
) > .callout-content {
    text-align: center;
}
// Align Callout Title Text
.callout.callout:is(
    [data-callout-metadata~="ttl-c"], 
    [data-callout-metadata~="title-Center"]
) {
    & .callout-title { justify-content: center; }
    
    & .callout-title-inner {
        display: block;
        flex: unset;
    }
}


/*Callout Sizing*/
.callout.callout.callout:is([data-callout-metadata~="banner"], [data-callout-metadata~="sban"]) {
    width: 100%;
    max-width: unset;
    
    & :is(.internal-embed, img) {
        width: 100%;
        object-fit: cover;
    }
}
.callout.callout.callout[data-callout-metadata~="clean"],
.callout.callout.callout[data-callout-metadata~="clean"] .callout-content {
    border: 0;
    box-shadow: none;

    & .callout-content {
        padding: 0;
    }
}

/*Caption Adjustments*/
// No Title
.callout:is(
    [data-callout-metadata~="no-t"], 
    [data-callout-metadata~="no-title"]
) > .callout-title { display: none; }

// Show Title
.callout.callout.callout.callout:is(
    [data-callout-metadata~="s-t"], 
    [data-callout-metadata~="show-title"]
) {
    & > .callout-title { display: flex; }
    
    & p { margin-top: 0; }
} 
// No Icon
.callout:is(
    [data-callout-metadata~="no-i"], 
    [data-callout-metadata~="no-icon"]
) > .callout-title .callout-icon { display: none; }


//No Table Header
.callout:is(
    [data-callout-metadata~="n-th"], 
    [data-callout-metadata~="no-table-header"]
) .callout-content > {
    & table { 
        margin-bottom: 5px; 

        & th { display: none; }
    }
}
//Wide Table
.callout[data-callout-metadata~="t-w"] table td { width: calc(var(--tbl-w) /2); }
.callout[data-callout-metadata~="t-w"] table { width: 100%; }

//No Margin
.callout:is(
    [data-callout-metadata~="nmg"], 
    [data-callout-metadata~="no-margin"]
) > .callout { margin: 0; }

//Expand for Embed
.callout[data-callout-metadata~="embed"] {
    .callout-content,
    & p {
        margin: 0;
        padding: 0;
    }
} 

// Callout Coloring
.callout.callout.callout {
    --callout-blue: 82, 139, 212;
    --callout-green: 86, 179, 117;
    --callout-orange: 230, 129, 63;
    --callout-red: 193, 67, 67;
    --callout-purple: 153, 97, 218;
    --callout-gray: 166, 189, 197;
    --callout-yellow: 208, 181, 48;
    --callout-pink: 227, 107, 167;
    // --callout: rgb(227, 107, 167);

    //Title Text Colors
    &:is(
        [data-callout-metadata~="color-blue"], [data-callout-metadata~="c-blue"],[data-callout-metadata~="background-color-blue"], [data-callout-metadata~="bg-c-blue"]
    ) { --callout-color: var(--callout-blue); }
    &:is(
        [data-callout-metadata~="color-green"], [data-callout-metadata~="c-green"],[data-callout-metadata~="background-color-green"], [data-callout-metadata~="bg-c-green"]
    ) { --callout-color: var(--callout-green); }

    &:is(
        [data-callout-metadata~="color-orange"], [data-callout-metadata~="c-orange"],[data-callout-metadata~="background-color-orange"], [data-callout-metadata~="bg-c-orange"]
    ) { --callout-color: var(--callout-orange); }

    &:is(
        [data-callout-metadata~="color-red"], [data-callout-metadata~="c-red"],[data-callout-metadata~="background-color-red"], [data-callout-metadata~="bg-c-red"]
    ) { --callout-color: var(--callout-red); }

    &:is(
        [data-callout-metadata~="color-purple"], [data-callout-metadata~="c-purple"],[data-callout-metadata~="background-color-purple"], [data-callout-metadata~="bg-c-purple"]
    ) { --callout-color: var(--callout-purple); }

    &:is(
        [data-callout-metadata~="color-gray"], [data-callout-metadata~="c-gray"],[data-callout-metadata~="background-color-gray"], [data-callout-metadata~="bg-c-gray"]
    ) { --callout-color: var(--callout-gray); }
    &:is(
        [data-callout-metadata~="color-yellow"], [data-callout-metadata~="c-yellow"],[data-callout-metadata~="background-color-yellow"], [data-callout-metadata~="bg-c-yellow"]
    ) { --callout-color: var(--callout-yellow); }
    &:is(
        [data-callout-metadata~="color-pink"], [data-callout-metadata~="c-pink"],[data-callout-metadata~="background-color-pink"], [data-callout-metadata~="bg-c-pink"]
    ) { --callout-color: var(--callout-pink); }
    &:is(
        [data-callout-metadata~="color-"], [data-callout-metadata~="c-"]
    ) { --callout-color: var(--callout); }


    //Background Colors
    &:is(
        [data-callout-metadata~="background-blue"], [data-callout-metadata~="bg-blue"],[data-callout-metadata~="background-color-blue"], [data-callout-metadata~="bg-c-blue"]
    ) { background-color: rgba(var(--callout-blue), 10%); }
    &:is(
        [data-callout-metadata~="background-green"], [data-callout-metadata~="bg-green"],[data-callout-metadata~="background-color-green"], [data-callout-metadata~="bg-c-green"]
    ) { background-color: rgba(var(--callout-green), 10%); }

    &:is(
        [data-callout-metadata~="background-orange"], [data-callout-metadata~="bg-orange"],[data-callout-metadata~="background-color-orange"], [data-callout-metadata~="bg-c-orange"]
    ) { background-color: rgba(var(--callout-orange), 10%); }

    &:is(
        [data-callout-metadata~="background-red"], [data-callout-metadata~="bg-red"],[data-callout-metadata~="background-color-red"], [data-callout-metadata~="bg-c-red"]
    ) { background-color: rgba(var(--callout-red), 10%); }

    &:is(
        [data-callout-metadata~="background-purple"], [data-callout-metadata~="bg-purple"],[data-callout-metadata~="background-color-purple"], [data-callout-metadata~="bg-c-purple"]
    ) { background-color: rgba(var(--callout-purple), 10%); }

    &:is(
        [data-callout-metadata~="background-gray"], [data-callout-metadata~="bg-gray"],[data-callout-metadata~="background-color-gray"], [data-callout-metadata~="bg-c-gray"]
    ) { background-color: rgba(var(--callout-gray), 10%); }
    &:is(
        [data-callout-metadata~="background-yellow"], [data-callout-metadata~="bg-yellow"],[data-callout-metadata~="background-color-yellow"], [data-callout-metadata~="bg-c-yellow"]
    ) { background-color: rgba(var(--callout-yellow), 10%); }
    &:is(
        [data-callout-metadata~="background-pink"], [data-callout-metadata~="bg-pink"],[data-callout-metadata~="background-color-pink"], [data-callout-metadata~="bg-c-pink"]
    ) { background-color: rgba(var(--callout-pink), 10%); }
}





/*--Callout Types--*/
body {
    --kbn-radius: 3px;
    --co-radius: 7px;
}
/* Minimalist Style */ 
.alt-co .callout.callout,
.callout[data-callout-metadata~="alt-co"] {
    background: rgba(var(--callout-color), 0.1); 
    border: 0;
    margin-left: 40px;
    margin-right: 40px;
    border-radius: var(--radius, var(--co-radius));
    box-shadow: 
        1px 1px 0 rgba(var(--callout-color), 0.2);

    & p:first-child {
        margin-block-start: 5px;
    }
    &:not(.is-collapsed) .callout-title { padding-bottom: 0; }
    & .callout-title { background: transparent; }
    & .callout-content { border: 0; }
}

.callout.callout[data-callout-metadata~="alt-line"] {
    border: 0;

    & .callout-title {
        background: transparent; 
        border-bottom: 2px solid var(--table, var(--background-modifier-border));
        // border-bottom: 2px solid rgb(var(--callout-color), 0.5);
        padding: 5px 0;
    }
    & .callout-fold { color: rgb(var(--callout-color)); }
    & .callout-content.callout-content {
        border: 0;
        border-bottom: 1px solid rgba(var(--callout-color), 0.5);
    }
}
//Inspired by Davey
.callout.callout[data-callout-metadata~="dim-hvr"]:not(:hover),
.callout.callout[data-callout-metadata~="dim"].is-collapsed:not(:hover) {
    opacity: 30%;
    transition: opacity 300ms;
}
    
.co-ttl-ctr {
    & .callout-title {
        justify-content: center;
    }
    & .callout-title-inner { 
        display: block;
        flex: unset;
    }
}





/*Infobox*/
:is(
    .is-mobile, 
    .is-mobile .is-live-preview, 
    .is-live-preview
) .callout[data-callout~="infobox"]:not([data-callout-metadata~="mobile"]) { 
    float: unset !important; 
    max-width: 100%; 
    margin: 0 !important;
    width: auto;
}
.callout[data-callout~="infobox"] {
    --callout-color: var(--interactive-accent-rgb);
    background: var(--note, var(--background-primary));

    border: 0;
    box-shadow: none;
    margin: 0; 
    margin-left: 8px;
    width: auto;
    max-width: 20vw;
    float: right;

    // & .image-embed.is-loaded { height: 0; }

    //Center collapse Arrow
    & .callout-title { 
        padding: 0; 
        justify-content: center;
    }
    
    &.is-collapsed .callout-fold {
        border: 1px solid var(--hr, var(--background-modifier-border));
        padding: 5px 10px;
    }
    
    //Display title collapse arrow on hover only
    & .callout-title :is(.callout-icon, .callout-title-inner)
    { display: none; }

    &:not(:hover):not(.is-collapsed) .callout-title {
        background-color: transparent;
    }
    

    //Show title
    &:is([data-callout-metadata~="show-title"], [data-callout-metadata~="s-t"]) {
        &:not(:hover):not(.is-collapsed) > .callout-title {
            display: flex;
            gap: 0;
        }
        &.is-collapsed .callout-title {
            border: 1px solid var(--hr, var(--background-modifier-border));
            display: flex;
        }
        & .callout-fold,
        & .callout-title .callout-title-inner {
            display: unset;
            align-items: center;
            align-content: center;
            padding: 5px 10px;
        }
        & .callout-fold {
            padding: unset;
            margin-top: auto;
            margin-bottom: auto; 
        }

        &.is-collapsed .callout-fold { border: 0; }
    }
    

    //Flush content and add border
    & .callout-content {
        padding: 1px;
        border: 1px solid var(--table, var(--background-modifier-border));
        margin: 0;
        border-radius: var(--radius, var(--co-radius));
    }
    //Style Tables
    & table { width: 100%; }
    & table td {
        white-space: pre-wrap;
        word-wrap: normal;
        word-break: normal;
    }
    & :is(p, table) {
        margin-block-start: 0;
        margin-block-end: 0;
        margin: 0;
    }
    
    //Resize Headers
    & :is(h1, h2, h3, h4, h5, h6) {
        font-size: 20px;
        text-align: center;
        margin: 0;
        padding: 2px;
        color: var(--text-normal);
        background: var(--outer-bar, var(--background-secondary)); 
    }
    //Image 
    & p,
    & .internal-embed,
    & img
    { 
        margin: auto;
        padding: auto;
        text-align: center; 
    }

    &[data-callout-metadata][data-callout-metadata][data-callout-metadata~="left"] {
        margin-right: 25px;
    }
}
@media print { .callout[data-callout~="infobox"] { max-width: 400px; } }


/*Image Grid*/
.callout.callout[data-callout="grid"] {
    background: transparent;
    border: 0;
    margin: 0; 
    box-shadow: none;

    & .callout-content {
        display: block;
        width: 100%;
        border: 0;
        box-shadow: unset;
        padding: 0;
    }
    & .callout-title { display: none; }
    
    //Internal Images
    & .callout-content {
        & p {
            display: flex;
            margin-block-start: 0;
            margin-block-end: 0;
            justify-content: center;
        }
        & img {
            display: table-cell;
            vertical-align: middle;
            padding: 1px;
            max-height: 35vh;
        }
        & img[alt="wfull"] { max-height: unset; }
    } 
    
    //External Images
    &[data-callout-metadata~="masonry"] .callout-content {
        & p {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(0, auto));
            grid-gap: 2px;
            margin: 0;
            margin-top: 5px;
        }
        & img {
            display: flex;
          
            flex: 1;
            align-self: stretch;
            object-fit: cover;
            max-height: unset;
        }
    } 
}


/*Captions*/
.callout.callout[data-callout~="caption"] {
    background: transparent;
    text-align: center;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 0;

    margin-top: -10px;
    max-width: 30vh;
    
    & .callout-title { display: none; }
    & p {
        margin-block-start: 0;
        margin-block-end: 0;
        color: var(--text-faint);
    }
}




/*Kanban*/
.callout.callout[data-callout~="kanban"] {
    --callout-color: var(--text-normal);
    --callout-icon: layout-dashboard;

    --item-outline: 0 0 0 1px var(--outline, var(--background-modifier-border));
    --box-shadow: 0 0 5px var(--outline, var(--background-modifier-box-shadow));

    --lane-width: 250px;
    
    //Undo Styling
    background: transparent;
    box-shadow: none;
    border: 0;
    width: auto;
    padding: 0;

    & .callout-title {
        justify-content: center;
        background: var(--background-primary-alt);
        padding: 5px;
        border-radius: var(--radius, var(--co-radius));
    }
    & .callout-title-inner { flex: unset; }
    & .callout-content { padding: 0; }
    
    //Hide List Bullet
    & ul li::marker,
    & ul li::before, 
    & ul::before, 
    & :is(ul, ul ul) .list-collapse-indicator
    {
        list-style-type: none;
        color: transparent;
        display: none !important;
    }

    //Kanban Styling
    & ul {
        display: flex;
        margin-block-start: 5px;
        padding-inline-start: 0;
        text-align: center;
        overflow: auto;
        
        &.dataview-ul { margin-inline-start: unset; }
        
        //Lane
        & li {
            min-width: var(--lane-width);
            border: 0;
            padding: 5px;
            
            margin: 5px 3px;
            padding-top: 4px;
            
            background: var(--note, var(--background-primary-alt));
            border-radius: var(--radius, var(--kbn-radius));
            box-shadow: var(--item-outline), var(--box-shadow);
        }
    }
    //Sub Lists
    & ul ul {
        flex-direction: column;
        text-align: left;
        overflow: unset;
        
        //List Items
        & li {
            min-width: calc(var(--lane-width) / 2);
            padding: 5px;
        
            box-shadow: var(--item-outline);
            background: var(--code-bg, var(--background-primary));
            
            & :is(img, .internal-embed) { margin-bottom: -6px; }
        }
    }
    //Fix checkboxes
    & ul.contains-task-list { padding-inline-start: 20px; }
    & .task-list-item-checkbox { cursor: default; }
}


/* Recite */
.callout.callout[data-callout="recite"] {
    --callout-color: 193, 67, 67;
    --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path stroke="none" fill="none" d="M0 0h24v24H0z"/><path d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455z"/></svg>';

    padding: 10px;
    padding-top: 5px;
    margin: 25px 10px;

    border-style: solid;
    border-width: 11px;
    border-image: url("") 11;
    border-image-outset: 9px 0px;
    box-shadow: 0px 0px 10px var(--outline, var(--background-modifier-box-shadow));
    
    background: var(--note, var(--background-primary));
    text-align: justify;
    
    & .callout-title {
        padding: 0;
        background: transparent;

        color: rgba(var(--callout-color), 1);
        justify-content: center;
    }
    &[data-callout-metadata*="bg-"]:not([data-callout-metadata*="bg-c"]) .callout-title { color: var(--text-normal); }
    & .callout-title-inner {
        flex: unset;
    }
    & .callout-content {
        padding: 0;
        padding-top: 10px;
    }
}


/* Metadata */
.callout.callout[data-callout~="Metadata" i] {
    --callout-icon: layers;
    --callout-color: 82, 139, 212;

    // margin: 0;
    border-width: 2px;
    box-shadow: 0px 0px 0px 1px var(--outline);
    // background: var(--note, var(--background-primary));
    
    // Title
    & .callout-title { 
        padding: 5px; 
        background-color: transparent; 
        justify-content: center; 
    }
    // & .callout-icon { padding-bottom: 6px;}
    & .callout-fold { color: rgb(var(--callout-color)) }
    & .callout-title-inner { 
        flex: unset;
        color: rgb(var(--callout-color)); 
    }
    // Content
    & .callout-content { 
        padding: 10px; 
        padding-top: 0px; 
    }
    // Fields
    & .callout-content strong { color: rgb(var(--callout-color)) }
    & .dataview.inline-field-key {
        background: rgb(var(--callout-color));
        color: var(--text-on-accent);
        font-weight: 900;
    }
    & .dataview.inline-field-value {
        font-weight: unset;
        background:transparent
    }
    
    // Table
    & table th { background-color: var(--aside-bg, rgba(var(--callout-color), 0.5)); }
    & table { 
        --tbl-td-h: 0;
        --tbl-td-w: 5px;
        
        white-space: nowrap;
        margin: 0; 
        // margin: auto;
        width: 100%;
    }
    
    & .callout-content p:last-child  { margin-bottom: 0; }
    & .callout-content p:first-child { margin-top: 0; }
    & .callout-content,
    & ul
    { margin: 0; }


    // ITS <i> Attribute Styling
    &[data-callout-metadata~="i-at"] {
        background: var(--outer-bar);
        border: 0;
        text-align: center;
        padding: 0;
        
        &.is-collapsible:not(.is-collapsed) {
            display: flex;
            flex-direction: row-reverse;
        }

        
        &:not(.is-collapsible) .callout-title,
        & .callout-title-inner,
        &:not(.is-collapsed) .callout-icon 
        { display: none; }

        & .callout-fold {
            display: flex;
            align-content: center;
            align-items: center;
            
            & svg { margin-bottom: unset; }
        }
        
        & .callout-content { 
            padding: 0px; 
            margin: auto; 
        }

    }

    //Lineless Tables
    &:is([data-callout-metadata~="tbl-cln"], [data-callout-metadata~="table-clean"]) {
        & table :is(td, tr, th) {
            background-color: transparent;
            border-color: transparent;
        }
    }
}



.callout-list {
    & .callout {
        border: 0;
        background-color: var(--note, var(--background-primary));
    }
    & .callout-title { padding: 5px 10px; }
    & .callout ul { 
        margin-block-start: 0; 
        margin-block-end: 0;
    }
}


/* Cards */
.callout[data-callout~="cards"] {
    --callout-color: none;
    --callout-icon: layout-dashboard;

    box-shadow: none;
    border: 0;
    width: auto;
    padding: 0;
    background: transparent;
    
    & .callout-title { display: none; }
    & .callout-content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 5px;
        
        border-radius: 0;
        padding-inline-start: 0px;
        padding: 0;
    }
    & p {
        margin-block-start: 0;
        margin-block-end: 0;
        padding: 0;
    }
    
    & strong {
        display: block;
        text-align: center;
        margin: auto;
        background-color: var(--outer-bar, var(--background-secondary));
    }
}
.callout[data-callout~="cards"] br {
    display: none;
}

/* Dataview Cards */

//Table
.callout[data-callout~="cards"][data-callout-metadata~="dataview"] {
    // Undo General Cards Grid Styling
    & .callout-content {
        display: unset;
        grid-template-columns: unset;
    }
    & .dataview.table-view-table {
        display: grid;

        // Undo Table Cell Styling
        & :is(td, tr) {
            border: 0;
            background: transparent;
            padding: 0;
        }
        // Hide Background in dv Table
        & strong {
            background: transparent;
        }
    }
    // Restyle Table Headers
    & .table-view-thead {
        & th {
            border: 0;
            background-color: transparent;
        }
        & tr {
            display: none;
        }
    }

    // Display cells as grid
    & .dataview.table-view-table tbody {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;

        & tr { 
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 10px;

            // background-color: var(--aside-bg);
            box-shadow: 
                0 0 0 1px var(--outline, var(--background-modifier-box-shadow)),
                2px 2px 0 var(--outline, var(--background-modifier-box-shadow));
        }
    }
}
//List
.callout[data-callout~="cards"][data-callout-metadata~="dvl"] {
    & .callout-content { display: block; }
    & br { display: unset; }

    & .block-language-dataviewjs .dataview-result-list-li,
    & .list-view-ul li {
        padding: 10px;
        background-color: var(--outer-bar);
        box-shadow: 2px 2px 0 var(--outline);
        margin-bottom: 5px;
    }
    & .dataview.list-view-ul li::before { margin-left: -27px; }
    & ul { padding-inline-start: unset; }
} 

// Columns
.callout[data-callout~="cards"]{
    &[data-callout-metadata~="1"] :is(.dataview.table-view-table tbody, .callout-content) {
        grid-template-columns: repeat(1, 1fr);
    }
    &[data-callout-metadata~="2"] :is(.dataview.table-view-table tbody, .callout-content) {
        grid-template-columns: repeat(2, 1fr);
    }
    &[data-callout-metadata~="4"] :is(.dataview.table-view-table tbody, .callout-content) {
        grid-template-columns: repeat(4, 1fr);
    }
    &[data-callout-metadata~="5"] :is(.dataview.table-view-table tbody, .callout-content) {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* Unwrapped Table */
.callout.callout[data-callout-metadata~="table"],
.callout.callout[data-callout~="table"] {
    border: 0;

    & .callout-content {
        padding: 0;
        border: 0;
        background-color: transparent;
        box-shadow: none;
    }
    &:not([data-callout-metadata~="show-title"], [data-callout-metadata~="s-t"]) .callout-title { display: none; }
    & table { 
        white-space: nowrap; 
        margin: 0; 
        margin: auto;
    }
}


/* Asides */
.callout[data-callout~="aside"] {
    --callout-icon: message-square;
    --callout-color: '';

    background-color: var(--aside-bg, var(--background-secondary));
    box-shadow: 
        .3em .3em 0 var(--accent, var(--background-modifier-box-shadow)),
        0 0 0 1px var(--accent, var(--background-modifier-box-shadow));
    
    float: right;
    position: relative;
    margin: 0;
    margin-right: -1.2em;
    margin-left: 5px;
    
    max-width: 400px;


    &:not([data-callout-metadata~="no-t"]) {
        & .callout-content { padding: 5px 10px; }
        & .callout-content p:first-child { margin-top: 0; }
    }

    &:not([data-callout-metadata~="show-title"], [data-callout-metadata~="s-t"]) {
        & .callout-title-inner { display: none; }
        & .callout-title { justify-content: space-between; }
    }


    &.is-collapsed {
        background-color: transparent;
        box-shadow: none;
        
        & .callout-title-inner { display: none; }
        & .callout-title {
            justify-content: space-between;
            padding: 0;
        }
        & .callout-fold { 
            margin: 0;
            padding: 0;
            margin-left: -25px;
            
            visibility: hidden;
        }
    }
}
.callout[data-callout~="aside"][data-callout-metadata~="clean"] {
    background: transparent;
    box-shadow: none;
}
.callout[data-callout~="aside"][data-callout-metadata~="tufte"] {
    background: transparent;
    box-shadow: none;

    float: right;
    position: relative;

    &:not(.is-collapsed) {
        width: 400px;
        margin-right: -25.3em;
    } 

    & .callout-title {
        padding-top: 0;
    }

    &.is-collapsed .callout-title {
        justify-content: unset;
    }
    &.is-collapsed .callout-content{ display: none; }
}
// Aside Fixes
.is-live-preview .callout[data-callout~="aside"] { float: unset; }

.callout.callout.callout[data-callout~="aside"] {
    
    // Left Aligned Aside Fixes
    &:is([data-callout-metadata~="left"],[data-callout-metadata~="p+l"]) {
        margin-left: -1.6em;

        &:not(.is-collapsed){ margin-right: 10px; }
        
        &[data-callout-metadata~="tufte"]:not(.is-collapsed) { 
            margin: unset;
            margin-left: -25em !important;

            & .callout-title {
                padding-top: 5px;
                flex-direction: row-reverse;
            }
        }
    }
}
// .markdown-source-view,
// .markdown-reading-view,
// .markdown-preview-view,
// .workspace-leaf-content[data-type='markdown'] .view-content {
//     overflow-x: auto;
// }


/* Columns */
.callout[data-callout*="column"] {
    --callout-color: var(--text-normal);
    --callout-icon: layout-dashboard;
    --columns: 2;

    background: transparent;
    box-shadow: none;
    border: 0;
    width: auto;
    padding: 0;

    & > .callout-content .callout-content { border: 0; }
    
    & > .callout-content {
        display: grid;
        grid-template-columns: repeat(var(--columns), 1fr);
        gap: 10px;

        background: transparent;
        box-shadow: none;
        border: 0;
        padding: 0;
    }
    &[data-callout-metadata~="3"] .callout-content {
        --columns: 3;
    }
    &[data-callout-metadata~="4"] .callout-content {
        --columns: 4;
    }


    // Flex
    &[data-callout-metadata~="flex"] > .callout-content {
        gap: unset;
        grid-template-columns: none;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        // Sub Callout Sizing
        & .callout {
            flex: 1 1 250px;
            margin: 5px;
            //background: transparent;
        }
    }

    //Dataview List Columns
    &[data-callout-metadata~="dataview"] {
        & > .callout-content { 
            grid-template-columns: unset; 
            gap: unset; 
        }


        & > .callout-content .dataview.list-view-ul {
            columns: var(--columns);
        }

        & > .callout-content .dataview li {
            break-inside: avoid;
        }
    }
}


/* Timeline */
.callout.callout[data-callout~="timeline"] {
    --callout-icon: clock-12;
    // --callout-color: 209, 220, 226;
    
    --micro: 50px;
    --tiny: 100px;
    --small: 200px;
    --small-med: 300px;
    --med-small: 400px;
    --medium: 500px;
    --med-tall: 600px;
    --tall: 700px;

    --c-timeline: 49.6%;
    

    background-color: transparent;

    margin: 0;
    border: 0;
    clear: both;
    
    
    & .callout-title {
        background: rgb(var(--callout-color), 0.35);
        align-content: center;
        align-items: center;
        
        & em {
            font-style: normal;
            display: block;
            font-size: 14px;
            line-height: 12px;
            color: rgb(var(--callout-color));
        }
    }
    
    & .callout-icon {
        background-color: var(--note, var(--background-primary));
        transform: scale(1.2);
        border-radius: 20px;
    }

    & .callout-content {
        background-color: rgb(var(--callout-color), 0.1);
    }
    
    //Side Alignment
    &[data-callout-metadata~="t-l"] {
        border-right: 4px solid rgb(var(--callout-color));
        margin-right: var(--c-timeline);

        & > .callout-title,
        & > .callout-content { box-shadow: -4px 4px 0 var(--outline, var(--background-modifier-box-shadow)); }
    }
    &[data-callout-metadata~="t-r"] {
        border-left: 4px solid rgb(var(--callout-color));
        margin-left: var(--c-timeline);
        
        & > .callout-title,
        & > .callout-content { box-shadow: 4px 4px 0 var(--outline, var(--background-modifier-box-shadow)); }
    }
    
    //Title/Icon Alignment
    &[data-callout-metadata~="t-l"] > .callout-title {
        flex-direction: row-reverse;
        text-align: right;
    }
    &[data-callout-metadata~="t-l"] > .callout-title .callout-icon {
        float: right;
        margin-right: -20px;
    }
    &[data-callout-metadata~="t-r"] > .callout-title .callout-icon {
        float: left;
        margin-left: -20px;
    }

    &[data-callout-metadata~="t-1"] {   padding-top: var(--micro); }
    &[data-callout-metadata~="t-2"] {   padding-top: var(--tiny); }
    &[data-callout-metadata~="t-3"] {   padding-top: var(--small); }
    &[data-callout-metadata~="t-4"] {   padding-top: var(--small-med); }
    &[data-callout-metadata~="t-5"] {   padding-top: var(--med-small); }
    &[data-callout-metadata~="t-6"] {   padding-top: var(--medium); }
    &[data-callout-metadata~="t-7"] {   padding-top: 350px; }
    &[data-callout-metadata~="t-8"] {   padding-top: var(--med-tall); }
    &[data-callout-metadata~="t-9"] {   padding-top: var(--tall); }
    &[data-callout-metadata~="t-10"] {  padding-top: 750px; }


    // &[data-callout-metadata~="b-1"] {   padding-bottom: var(--micro); }
    // &[data-callout-metadata~="b-2"] {   padding-bottom: var(--tiny); }
    // &[data-callout-metadata~="b-3"] {   padding-bottom: var(--small); }
    // &[data-callout-metadata~="b-4"] {   padding-bottom: var(--small-med); }
    // &[data-callout-metadata~="b-5"] {   padding-bottom: var(--med-small); }
    // &[data-callout-metadata~="b-6"] {   padding-bottom: var(--medium); }
    // &[data-callout-metadata~="b-7"] {   padding-bottom: 350px; }
    // &[data-callout-metadata~="b-8"] {   padding-bottom: var(--med-tall); }
    // &[data-callout-metadata~="b-9"] {   padding-bottom: var(--tall); }
    // &[data-callout-metadata~="b-10"] {  padding-bottom: 750px; }
}